<template>
    <el-radio-group v-model="value" @change="Change('change')" :style="domCss" :disabled="disabled">
        <el-radio v-for="(el,index) in options" :key="index" :label="el[defaultProps.value]">{{el[defaultProps.label]}}</el-radio>
    </el-radio-group>
</template>

<script>
export default {
    props:{
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            type: Object,
            default: () => {return {
                label: 'label',
                value: 'value',
                children: 'children'
            }}
        },
        defaultValue: {
            type: [String,Number],
            default: ''
        }
    },
    data() {
        return {
            value:null,
        }
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.value = v
            }
        }
    },
    methods: {
        Change(type){
                console.log(this.value)
            this.$emit('EventHandler',type, this.$attrs.prop,this.value);
        },
    },
}
</script>

<style lang="scss" scoped>

</style>